<template>
	<el-config-provider :locale="zhCn">
		<el-pagination background v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
			:page-sizes="[5,10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</el-config-provider>
</template>

<script setup lang="ts">
import {
	reactive
} from 'vue'

import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文语言包


// 暴露props
interface props {
	// 当前页
	currentPage: number;
	// 页数
	pageSize: number;
	// 总条目数
	total: number;
}
const props = defineProps<props>();

let pagination = reactive({
	currentPage: props.currentPage,
	pageSize: props.pageSize
})

// 生成事件对象，数组中就是对象名
const emit = defineEmits(["pageChange", "update:pageSize", "update:currentPage"]);

const handleSizeChange = (val: any) => {
	emit("update:pageSize", val);
	emit("pageChange", pagination);
}

const handleCurrentChange = (val: any) => {
	emit("update:currentPage", val);
	emit("pageChange", pagination);
}
</script>

<style></style>